<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>

    <style>
        #outer {
            width: 300px;
            height: 350px;
            margin: 50px auto;
            padding: 10px;
            border: 10px solid green;
            background-color: greenyellow;
            text-align: center;
        }

        img{
            height: 300px;
        }

    </style>
</head>



<body>

    <div id="outer">

        <img src="images/1.png" alt="表情包">

        <button id="prev" onclick="prevImg()">&lt上一张</button>
        <button id="next" onclick="nextImg()">下一张&gt</button>

    </div>


</body>

<script type="text/javascript">

    // 获取img标签
    var img = document.getElementsByTagName("img")[0];
    var num = 3;
    var nowIdx = 0;

// 0 2
// 1 0
// 2 1
    // 点击按钮切换图片
    function prevImg(params) {
        // alert("prev");
        nowIdx = (nowIdx + 2) % 3;
        img.src = "images/" + (nowIdx+1) + ".png"
    }

    function nextImg(params) {
        // alert("next");
        nowIdx = (nowIdx + 3) % 3 + 1;
        img.src = "images/" + nowIdx + ".png"
    }

</script>

</html>